<template>
  <header>
    <TopArea />
  </header>
  <main>
    <div class="submitting" v-if="newSurveyData.submitting">
      正在创建
      <LoadingSvg />
    </div>
    <div class="created" v-else-if="newSurveyData.created">
      创建成功，链接为：
      <a class="survey-url" :href="newSurveyData.surveyUrl" target="_blank">{{ newSurveyData.surveyUrl }}</a>
    </div>
    <template v-else>
      <component :is="'LeftArea'"></component>
      <component :is="'CenterArea'"></component>
      <component :is="'RightArea'"></component>
    </template>
  </main>
</template>

<script>
import newSurveyData from '@/store/new-survey-data'


import { COMPONENT_NAME, QUESTION_TYPE_DESCRIPTION, QUESTION_TYPE_SINGLE, QUESTION_TYPE_MULTI, QUESTION_TYPE_SELECT, QUESTION_TYPE_TEXT, QUESTION_TYPE_TEXTAREA, QUESTION_TYPE_MATRIX_RADIO } from '../../constants/default'

import TopArea from './TopArea/TopArea.vue'
import LeftArea from './LeftArea/LeftArea.vue'
import CenterArea from './CenterArea/CenterArea.vue'
import RightArea from './RightArea/RightArea.vue'

export default {
  components: { TopArea, LeftArea, CenterArea, RightArea },
  data() {
    return {
      newSurveyData: newSurveyData(),
      // currentIsRequired: true, // 当前选中的问题是否是必选的
      // isMouse: false,
      // 问卷标题 + 问卷描述 + 问卷问题 共同组成一份问卷

      QUESTION_TYPE_DESCRIPTION,
      QUESTION_TYPE_SINGLE,
      QUESTION_TYPE_MULTI,
      QUESTION_TYPE_SELECT,
      QUESTION_TYPE_TEXT,
      QUESTION_TYPE_TEXTAREA,
      QUESTION_TYPE_MATRIX_RADIO,
      COMPONENT_NAME,
    }
  },
  mounted() {
    this.newSurveyData.loadFromLocal()

    document.addEventListener('click', _ => {
      console.log('debugger: ', '点击了')
      this.newSurveyData.resetCurrentOrder()
    })
  },
}
</script>

<style lang="scss" scoped>

.created,
.submitting {
  width: max-content;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  svg {
    margin-left: 10px;
  }
}

main {
  min-width: 900px;
  padding-top: 100px;
  display: flex;
  justify-content: center;
  position: relative;

  .survey-url:hover {
    color: #60a5fa;
    text-decoration: underline;
  }

}
</style>
